import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:s_mankey/generated/I18n.dart';
import 'package:s_mankey/view_model/city_VM.dart';

class SelectCity extends StatefulWidget {
  @override
  _SelectCity createState() => _SelectCity();
}

class _SelectCity extends State<SelectCity> {
  //sync*同步函数(类)生成器, 同时生成一个widget的函数??? 所以必选的成员widget属性也可以不用写?
  Iterable<Widget> get _inputSelect sync* {
    var model = Provider.of<CityVM>(context);
    for (int i = 0; i < model.cityNameList.length; i++) {
      yield InputSelect(
        choiText: Provider.of<CityVM>(context).cityNameList[i],
        parent: this,
        index: i,
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(''),
      ),
      body: Center(
        child: Container(
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(20), color: Colors.white),
            height: 550,
            width: 300,
            padding: EdgeInsets.fromLTRB(20, 20, 20, 20),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Row(
                  children: <Widget>[
                    RichText(
                        text: TextSpan(
                            text: '当前城市: ',
                            style: TextStyle(fontSize: 20, color: Colors.black),
                            children: <TextSpan>[
                          TextSpan(
                              text:
                                  '${Provider.of<CityVM>(context).cityName}',
                              style:
                                  TextStyle(color: Colors.pink, fontSize: 20)),
                        ])),
                    Icon(
                      Icons.location_on,
                      color: Colors.pink,
                    )
                  ],
                ),
                Container(
                  padding: EdgeInsets.only(top: 20),
                  child: Wrap(
                    spacing: 20,
                    runSpacing: 20,
                    children: _inputSelect.toList(),
                  ),
                ),
              ],
            )),
      ),
    );
  }
}

//做了一个生成choice的类.
class InputSelect extends StatelessWidget {
  final int index; //用于传入第几个tap
//  final widgte;
  final parent; //决定谁是父类. 用于下面调用父类的方法和属性.
  final String choiText; //显示文本

  const InputSelect(
      {@required this.index,
//      @required this.widgte,
      @required this.parent,
      @required this.choiText})
      : super();

  @override
  Widget build(BuildContext context) {
    var model = Provider.of<CityVM>(context);
    return ChoiceChip(
      label: Text(choiText),
//      avatar: selected == index? icon: null,
      //边框颜色.
      shape: StadiumBorder(
          side: BorderSide(
        color: model.selectedIndex == index ? Colors.black : Colors.pink,
      )),
      //选中的背影颜色
      selectedColor: Colors.transparent,
//      selectedShadowColor: Colors.black,
      backgroundColor: Colors.transparent,
      labelStyle: TextStyle(fontSize: 20, color: Colors.pink),
      labelPadding: EdgeInsets.fromLTRB(30, 10, 30, 10),
      materialTapTargetSize: MaterialTapTargetSize.padded,
      selected: model.selectedIndex == index,
      //如果循环索引与当前索引一致,则显示当前选择.
      onSelected: (bool value) {
        model.cityIndex(index);
        //选择一秒后关闭窗口.
        Future.delayed(Duration(seconds: 1), () {
          Navigator.of(context).pop();
        });
      },
    );
  }
}
